<template>
  <div class="store-container">
    <div class="store-code">
      <a-avatar :src="providerInfo.head_img" alt="服务商二维码" :size="55" shape="square" icon="user"/>
    </div>
    <div class="store-info">
      <div class="store-title">
        <h3 style="font-weight:bold;height:24px" v-if="providerInfo.name">
          {{ providerInfo.name }}

        </h3>
      </div>
      <div class="store-content">所在省：{{ providerInfo.province }}</div>
    </div>
    <div class="store-info">
      <p class="store-content">电话：{{ providerInfo.mobile }}</p>
      <div class="store-content">所在市：{{ providerInfo.city }}</div>
    </div>
    <div class="store-info">
      <div class="store-content"></div>
      <div class="store-content">所在区：{{ providerInfo.area }}</div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        providerInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    }
}
</script>

<style lang="less" scoped>
.store-container{
    display: flex;
    // color: #000001;
    .store-code{
        width: 50px;
        height: 50px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .store-info{
        margin-left: 20px;
        width: 350px;
        .store-content{
            line-height: 1.5;
            min-height: 21px;
            &:first-child{
                margin-bottom: 0.8em;
            }
        }
        &+.store-info{ 
            margin-left: 50px;
        }
    }
}
</style>
